<template>
	<div class="flex-center">
		<jk-button
			v-show="showEnableBtn"
			v-if="isAuditStateBtn"
			:has-permission="getPermission([`${permissionPrefix}:update`])"
			:type="scope.row.auditState === 1 ? 'warning' : 'success'"
			class="pointer item-gap"
			size="mini"
			:icon="scope.row.auditState ? 'el-icon-circle-close' : 'el-icon-coordinate'"
			@click="onEnableBtn"
		>{{ scope.row.auditState ? '撤销' : '审核' }}</jk-button>
		<jk-edit-button
			:disabled="scope.row.auditState !== 0"
			:permission-prefix="permissionPrefix"
			class="item-gap"
			@click="onEditBtn(scope.row)"
		></jk-edit-button>
		<el-dropdown @command="onDropdownChange">
			<jk-button type="primary" size="mini">
				更多<i class="el-icon-arrow-down el-icon--right"></i>
			</jk-button>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item
					v-for="(item, index) in dropdownOption"
					:key="index"
					:style="{'text-decoration': getPermission([`${permissionPrefix}:${item.permissionName}`]) ? '' : 'line-through'}"
					:command="item.permissionName"
					:disabled="item.allowState === -1 ? false : scope.row.auditState !== item.allowState"
				>
					<span :class="[item.icon, 'item-gap']"></span>
					<span>{{ item.name }}</span>
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</template>
<script>
    import permissionMixin from '../../../mixins/permission-mixin';
    import { getRequest, postRequest, putRequest, deleteRequest } from '@/utils/request';
    import { tipsBar } from '../../../utils/jk/jk-tool';
    export default {
        name: 'JkTableOperationBar',
        mixins: [permissionMixin],
        components: { },
        props: {
            permissionPrefix: {
                type: String,
                default: ''
            },
            scope: {
                type: Object,
                default() {
                    return {};
                }
            },
            apiPrefix: {
                type: String,
                default: ''
            },
            showEnableBtn: {
                type: Boolean,
                default: true
            },
            isAuditStateBtn: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                /**
                 * @allowState表示允许操作的状态，
                 * 值：
                 *  -1表示任何状态都可以操作
                 *
                 *  @divided 分隔每一项的下划线
                 * */
                dropdownOption: [
                    { name: '详情', icon: 'el-icon-view', permissionName: 'query', allowState: -1 },
                    { name: '删除', icon: 'el-icon-delete', permissionName: 'delete', allowState: 0, divided: true }
                ]
            };
        },
        methods: {
            onDropdownChange(type) {
                if (type === 'query') {
                    if (this.getPermission([`${this.permissionPrefix}:${type}`])) {
                        this.$emit('on-detail', this.scope.row);
                    } else {
                        tipsBar(this, 'custom', 'warning', '无操作权限!');
                    }
                } else {
                    if (this.getPermission([`${this.permissionPrefix}:${type}`])) {
                        this.onDeleteBtn();
                    } else {
                        tipsBar(this, 'custom', 'warning', '无操作权限!');
                    }
                }
            },
            onDeleteBtn() {
                this.$msgbox({
                    title: '消息',
                    message: `确认 "删除" ？`,
                    iconClass: 'el-icon-question',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            deleteRequest(`/${this.apiPrefix}/delete`, { id: this.scope.row.id }).then(res => {
                                instance.confirmButtonLoading = false;
                                instance.confirmButtonText = '确定';
                                if (res.data.status === 200) {
                                    tipsBar(this, 'custom', 'success', `删除成功!`);
                                    done();
                                    this.$emit('on-refresh');
                                }
                            });
                        } else {
                            done();
                        }
                    }
                });
            },
            onEnableBtn() {
                this.$msgbox({
                    title: '消息',
                    message: `确认 "${this.scope.row.auditState ? '撤销' : '审核'}" ？`,
                    iconClass: 'el-icon-question',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            postRequest(`/${this.apiPrefix}/update-audit-state`, { id: this.scope.row.id }).then(res => {
                                instance.confirmButtonLoading = false;
                                if (res.data.status === 200) {
                                    tipsBar(this, 'custom', 'success', `${this.scope.row.auditState ? '撤销' : '审核'}成功!`);
                                    done();
                                    this.$emit('on-refresh');
                                } else {
                                    instance.confirmButtonText = '确定';
                                }
                            });
                        } else {
                            done();
                        }
                    }
                });
            },
            onDetailBtn(row) {
                this.$emit('on-detail', row);
            },
            onEditBtn(row) {
                this.$emit('on-edit', row);
            }
        },
        mounted() {

        }
    };
</script>
